<style lang="scss" scoped>
  @import "../../utils/base.scss";

  .p_content {
    font-size: 13px;
    min-width: 100px;
    max-width: 200px;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    padding-bottom: 4px;
  }
</style>
<template>
  <div ref='base' class="quest_content" style="overflow-y:auto">
    <template id="baseInfo">
      <component ref="baseInfo" :is="'baseInfo'"   :reqId="reqId" :baseInfo="object.user"></component>
    </template>

    <template id="projectInfo">
      <div class="qheader"
        :style="{borderBottom: ifedit ? '0px solid rgb(210,210,210)' : '1px solid rgb(210,210,210)',}">
        <p>项目信息</p>
      </div>
      <div class="gcontent">
        <Form :model="object.project" :label-width="140" label-position="left" class="form form_left">
          <Row>
            <Col span="8">
            <FormItem label="工单标题：" :required="true">
              <Input v-model="object.reqSubject" :readonly="ifedit" placeholder="XX租户申请XX业务IP" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="提单租户：" :required="true">
              <Input v-if="ifedit" v-model="object.role.tenant_name" :readonly="readonly" />
              <Select v-else filterable v-model="object.roleId" :label-in-value="true" @on-change="selectTenant"
                :disabled="ifedit">
                <Option v-for="(i,index) in tenantList" :value="i.id" :key="index">{{i.tenant_name}}</Option>
              </Select>
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="所属项目：" :required="true">
              <Input v-if="ifedit" v-model="object.project.project" :readonly="readonly" />
              <Select v-else filterable v-model="object.projectId" @on-change="getProjectInfo" :disabled="ifedit">
                <Option v-for="(item,index) in projectList" :value="item.id" :key="index">{{item.project}}</Option>
              </Select>
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="入驻位置：">
              <Input v-model="object.project.position" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="项目类型：">
              <Input v-model="object.project.projectType" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="项目经理：">
              <Input v-model="object.project.manager" :readonly="readonly" />
            </FormItem>
            </Col>
            <Col span="8" class="col_left">
            <FormItem label="经理联系方式:">
              <Input v-model="object.project.manager_phone" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span="8">
            <FormItem label="运营人员：">
              <Input
                v-if="object.project.business!=null && object.project.business!=undefined && object.project.business!=''"
                v-model="object.project.business" :readonly="readonly" />
              <Input v-else v-model="object.project.tenant_business" :readonly="readonly" />
            </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </template>

    <template id="ipInfo">
      <div class="qheader"
        :style="{borderBottom: ifedit ? '0px solid rgb(210,210,210)' : '1px solid rgb(210,210,210)',}">
        <p>IP申请信息</p>
        <Button v-if="!ifedit" size="small" class="data_button" @click="addVIPList">新增VIP</Button>
      </div>
      <div class="gcontent">
        <Form :label-width="140" label-position="left" class="form form_left">
          <Row v-for="(item,index) in objList" :key="index" style="margin-top:1rem">
            <Col span="23">
            <vipTable ref="vipTable" v-model="objList[index]" :IpGroup="index" :ifedit="ifedit" :isHandle="false"
              :vipObject="vipObject[index]"></vipTable>
            </Col>
            <Col v-if="!ifedit" span="1">
            <Icon style="margin-left:-1.2rem; cursor: pointer;" type="md-close" @click="remove(index)" size="20" />
            </Col>
          </Row>
        </Form>
      </div>
      <!-- <div class="gcontent">
            	<Form :label-width="140" label-position="left" class="form form_left" >
					<Row>
                        <Col span="23">
                            <vipTable ref="vipTable" v-model="object.object" :ifedit="ifedit" :isHandle="false" :vipObject="vipObject"></vipTable>
                        </Col>
                    </Row>
				</Form>
			</div> -->
    </template>

    <!-- 附件 -->
    <template>
      <div class="qheader" :style="{borderBottom: '1px solid rgb(210,210,210)',}">
        <p>附件</p>
      </div>
      <component ref="file" :is="'file'" :ifedit="ifedit" :filesList="filesList" v-model="object.files"></component>
    </template>
  </div>
</template>

<script>
  import ajax from "../../ajax_util"
  import Axios from 'axios'
  import notice from '../../base/notice'
  import file from './settledin/file'
  import fileUpload from '../../base/file_uploader'
  import fileModal from '../../base/file_modal'
  import fileDownload from '../../base/file_download'
  import baseInfo from './person_baseInfo'
  import vipTable from './vip/vip_table'

  export default {
    name: "apply",
    components: {
      notice,
      file,
      fileUpload,
      fileModal,
      fileDownload,
      baseInfo,
      vipTable
    },
    data() {
      return {
        readonly: true,
        tenantList: [],
        projectList: [],
        objList: [
          [{
            des: "",
            id: 0,
            ip: "",
            overId: 0,
            ipFlag: false,
            ipGroup: 0,
          }]
        ],
        object: {
          // objList:[
          //     [{
          //         des: "",
          // 		id: 0,
          // 		ip: "",
          // 		overId: 0,
          //         ipFlag:false,
          //     }]
          // ],
          object: [{
            des: "",
            id: 0,
            ip: "",
            overId: 0,
            ipFlag: false,
            ipGroup: 0,
          }],
          files: [],
          project: {
            create_time: 0,
            cycle: "",
            des: "",
            end_time: 0,
            id: 0,
            isContract: "",
            isWithDraw: 0,
            manager: "",
            manager_phone: "",
            position: "",
            project: "",
            projectType: "",
            tenant_id: 0,
            tenant_name: "",
            business: "",
            tenant_business: "",
            withDrawTime: 0
          },
          projectId: 0,
          reqId: 0,
          reqSubject: "",
          role: {
            id: 0,
            tenant_name: ""
          },
          roleId: 0,
          user: {
            email: "",
            id: 0,
            id_card: "",
            phone: "",
            user_name: ""
          },
          userId: 0
        },
        tenant: {},
        userId: 0,
        vipObject: [{
          des: "",
          id: 0,
          ip: "",
          overId: 0,
          ipFlag: "",
          ipGroup: '',
        }]
      }
    },
    mounted: function() {
      console.log("!!!!!!!!!!!!", this.$store.state.user, this.reqId);
      if (this.reqId == null && this.draftsId == null) {
        this.getBaseInfo();
      } else if (this.reqId != null) {
        this.getApplyInfo();
        if (!this.ifedit) {
          this.getTenants(this.userId);
          this.selectTenant(this.tenant);
        }
      } else if (this.draftsId != null) {
        this.getDrafts();
      }
    },
    methods: {
      addVIPList() {
        var all_len = this.objList.length;
        this.objList.push(
          [{
            des: "",
            id: 0,
            ip: "",
            overId: 0,
            ipFlag: false,
            ipGroup: all_len
          }])
      },
      getBaseInfo() {
        this.object.userId = this.$store.state.user.id;
        this.object.user.id = this.$store.state.user.id;
        this.object.user.userName = this.$store.state.user.user_name;
        this.object.user.applyCardId = this.$store.state.user.id_card;
        this.object.user.telephone = this.$store.state.user.phone;
        this.object.user.email = this.$store.state.user.email;
        this.object.user.applydept = this.$store.state.user.department;
        this.getTenants(this.object.user.id);
      },
      getApplyBaseInfo() {
        this.object.userId = this.processInfo.base.userFBean.id;
        this.object.user.id = this.processInfo.base.userFBean.id;
        this.object.user.userName = this.processInfo.base.userFBean.user_name;
        this.object.user.applyCardId = this.processInfo.base.userFBean.id_card;
        this.object.user.telephone = this.processInfo.base.userFBean.phone;
        this.object.user.email = this.processInfo.base.userFBean.email;
        this.object.user.applydept = this.processInfo.dptName;
      },
      classify(arr, key) {
        let kind = []; //存放属性标识
        let newArr = []; //返回的数据
        arr.map((item) => {
          // 判断key是否存在，不存在则添加
          if (!kind.includes(item[key])) {
            kind.push(item[key]); //kind添加新标识
            newArr.push([]); //添加数组
          }
          let index = kind.indexOf(item[key]); //返回带有标识在kind内的下标，判断加入哪个数组
          newArr[index].push(item); //将对象存入数组
        });
        return newArr;
      },
      getApplyInfo() {
        console.log("getApplyInfo------this.processInfo--->", this.processInfo);
        this.getApplyBaseInfo();

        var object = [];
        var vipObject = [];
        this.processInfo.content.forEach(item => {
          if (item.ipType != undefined && item.ipType != null) {
            if (item.ipType == "" || item.ipType == "vip_service") {
              object.push(item);
            } else {
              vipObject.push(item);
            }
          }
        })
        //调用方法，对象被判断的属性值相同，则在同个数组内
        this.objList = this.classify(object, "ipGroup")
        console.log('this.objList', this.objList)
        if (vipObject.length == 0) {
          this.objList.forEach(item => {
            vipObject.push([])
          })
        }

        this.object.object = object;
        this.vipObject = vipObject;

        this.object.projectId = this.processInfo.base.project.id;
        this.object.project = this.processInfo.base.project;
        this.object.roleId = this.processInfo.base.role.id;
        this.object.role = this.processInfo.base.role;
        //this.object.user = this.processInfo.base.userFBean;
        this.object.files = this.processInfo.files;
        this.object.reqSubject = this.processInfo.reqSubject;
        this.tenant.value = this.processInfo.base.role.id;
        this.tenant.label = this.processInfo.base.role.tenant_name;
        this.userId = this.processInfo.base.userFBean.id;
        console.log("vipObject------vipObject--->", this.vipObject);
      },
      getDrafts() {
        var url = this.CONFIG.base_url_test + "/draft/content/" + this.draftsId;
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log("-----getDrafts-----", data);
            that.object = data.req;
            console.log("-----22222-----", that.object);
            that.getTenants(that.object.userId);
          }
        })
      },
      getTenants(userId) {
        var url = this.CONFIG.url_know + "/tenantByUserId/" + userId;
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log("------55555-----------", data)
            that.tenantList = data;

            if (that.object.role.id != null && that.object.role.id != undefined && that.object.role.id != "") {
              var tenant = {};
              tenant.value = that.object.role.id;
              tenant.label = that.object.role.tenant_name;
              that.selectTenant(tenant);
            }
          }
        })
      },
      selectTenant(tenant) {
        console.log("---------tenant-----", tenant)
        this.object.role.id = tenant.value;
        this.object.role.tenant_name = tenant.label;

        this.tenantList.some(item => {
          console.log("========item======", item);
          if (tenant.value == item.id) {
            this.projectList = item.projects;
            return true
          }
        })

      },
      getProjectInfo(id) {
        this.projectList.some(item => {
          if (item.id === id) {
            console.log("============", item);
            item.create_time = 0;
            item.end_time = 0;
            this.object.project = item;
            return true;
          }
        })
      },
      dateFormat(event) {
        var date = new Date(event);
        return (date.getTime() / 1000);
      },

      remove(index) {
        this.objList.splice(index, 1);
        if (this.objList.length > 0) {
          for (let index = 0; index < this.objList.length; index++) {
            var element = this.objList[index];
            for (let index2 = 0; index2 < element.length; index2++) {
              this.objList[index][index2].ipGroup = index
            }
          }
        }

      },

      validate() {
        var hasIP = false;
        var ipFlag = false;

        for (var i = 0; i < this.object.object.length; i++) {
          if (this.object.object[i].ip == "" || this.object.object[i].ip == null || this.object.object[i].ip ==
            undefined) {
            hasIP = true;
            break;
          }

          if (this.object.object[i].ipFlag) {
            ipFlag = true;
            break;
          }
        }

        if (this.object.reqSubject == '') {
          this.$Message.error({
            content: '请填写工单标题!',
            duration: 3
          });
          return false;
        } else if (this.object.reqSubject.length > 50) {
          this.$Message.error({
            content: '工单标题最多填写50个字符！',
            duration: 3
          });
          return false;
        } else if (this.object.roleId == null || this.object.roleId == 0) {
          this.$Message.error({
            content: '请选择提单租户!',
            duration: 3
          });
          return false;
        } else if (this.object.projectId == null || this.object.projectId == 0) {
          this.$Message.error({
            content: '请选择所属项目!',
            duration: 3
          });
          return false;
          // }else if(this.object.object.length==0){
          //     this.$Message.error({
          //         content: '请至少新增一个IP地址!',
          //         duration: 3
          //     });
          //    	return false;
          // }else if(hasIP){
          //     this.$Message.error({
          //         content: '请填写完所有IP地址!',
          //         duration: 3
          //     });
          //    	return false;
          // }else if(ipFlag){
          //     this.$Message.error({
          //         content: 'IP地址格式不对!',
          //         duration: 3
          //     });
          //     return false;
        } else {
          return true;
        }
      },
      getInfo() {
        var object = {};
        object = this.object;
        object.base = {
          dptName: this.object.user.applydept
        }

        var temp = []
        this.objList.forEach(item => {
          temp.push.apply(temp, item)
        })
        object.object = temp

        return object;
      },
      // 获取处理时需要提交的参数
      getHandleParams(handleInfo) {
        handleInfo.reqSubject = this.object.reqSubject
        handleInfo.startTime = 0
        handleInfo.hopeTime = 0
        handleInfo.reqDes = ""
        handleInfo.isEdit = this.isEdit;
        console.log("aaaa-------->", this.ifedit, this.isEdit == 1)
        handleInfo.isChangeContent = 0;
        if (!this.ifedit) {
          handleInfo.isChangeContent = 1;
        }
        if (this.isEdit == 1) {
          handleInfo.roleId = this.object.roleId;
          handleInfo.projectId = this.object.projectId;
          handleInfo.content = this.getInfo()
        }
      },
      //处理页面获取下一步处理人需要的参数
      getHandleUserParams(opOptions) {
        var param = {}
        if (opOptions != "") {
          param.vari = opOptions
        }
        param.roleId = this.object.roleId;
        param.projectId = this.object.projectId;
        return param
      },
    },
    props: {
      isEdit: {},
      value: {
        dafault: false
      },
      ifedit: {
        type: Boolean,
        default: false,
      },
      reqId: {
        default: null
      },
      draftsId: {
        default: null
      },
      filesList: {},
      processInfo: {},
    },
    watch: {
      ifedit(Val) {
        this.getTenants(this.userId);
        this.selectTenant(this.tenant);
      }
    }
  }
</script>
